<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 110px;"></div>
    </div>
</template>
<script>
import { Color } from '@antv/g2/lib/dependents';
import { Radar } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '检测视频'
            
        }
    },
    methods: {
        radarChart() {
            const data = [
                { name: '兰州理工大学', star: 1037 },
                { name: '中北大学', star: 738 },
                { name: '测试', star: 741 },
                { name: '昆山杰普软件院', star: 214},
                { name: '太原理工大学', star: 66 },
              
            ];
            const radarPlot = new Radar(this.$refs.bottom4, {
                data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
                xField: 'name',
                yField: 'star',
                colorField: 'type', // 部分图表使用 seriesField
  


                appendPadding: [0, 10, 0, 10],
                meta: {
                    star: {
                        alias: 'star 数量',
                        min: 0,
                        nice: true,
                        formatter: (v) => Number(v).toFixed(2),
                    },
                },
                xAxis: {
                    tickLine: null,
                    style: {
                        fill: 'white'
                    }
                },
                yAxis: {
                    label: false,
                    style: {
                        fill: 'white'
                    },
                    grid: {
                        alternateColor: 'rgba(0, 0, 0, 0.04)',
                    },
                },
                // 开启辅助点
                point: {
                    size: 2,
                },
                area: {},
            });
            radarPlot.render();

        }
    },

    mounted() {
        this.radarChart();
    }
}
</script>
<style scoped></style>